<template>
    <el-dialog :title="title" :visible.sync="visible">
        <div class="mini-dialog-box">
            <div>
                <p>尊敬的用户您好，为了更加方便快捷，</p>
                <p>请使用小程序客户端进行操作</p>
            </div>
            <div>
                <div class="img-box">
                    <img v-if="miniPic" :src="miniPic" alt="">
                    <p v-else>暂无小程序二维码</p>
                </div>
            </div>
            <div>
                <p>请使用微信扫描二维码</p>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            title: '',
            visible: false,
            miniPic:'',
        }
    },
    methods: {
        init() {
            this.visible = true;
        },
        getMiniPic() {
            this.$ajax.getMiniLogo().then(res => {
                this.miniPic = res.data.miniLogo
            }).catch(err => {
                this.$message({
                    message: err.msg,
                    type: 'error'
                })
            })
        },
    },
    mounted() {
        this.getMiniPic();
    },
}
</script>

<style lang="scss">
.mini-dialog-box {
    text-align: center;
    font-size: 14px;
    color: #3c3c3c;
    .img-box {
        margin: 20px 0;
        img {
            width: 150px;
            height: 150px;
            border: 2px solid #eeeeee;
            padding: 8px;
        }
    }
    > div:last-child {
        color: #1189ff;
    }
}
</style>